Repository navigation
feat(calendar): 여행 날짜 선택 달력 적용 - #240
Conversation
- CONTRIBUTING에 브랜치 종류 표(fix·refactor·chore·docs 추가), PR 전 검증, 작업 공유 기준 정리 - PR 템플릿에 노션 링크 칸 추가 - Claude Code 스킬 start-work, open-pr 추가 - vitest에 테스트용 NEXT_PUBLIC 환경 변수를 넣어 36개 파일 로드 실패 수정 - .claude/settings.local.json을 gitignore에 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- npm run screens: Playwright로 PC 크롬·사파리(WebKit)·안드로이드(Galaxy S24 에뮬레이션), simctl로 아이폰 시뮬레이터 스크린샷 - 전용 크롬 프로필에서 로그인해 localhost 인증 쿠키만 저장 - 3000번 dev 서버가 현재 폴더 코드인지 검사 - open-pr 검증에 화면 확인 단계, PR 템플릿에 화면 확인 항목 추가 - CONTRIBUTING에 화면 확인 기준 표 추가 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 날짜 input 대신 날짜 칸 클릭 → 날짜 선택 → 확인 순서로 변경 - 날짜 칸 접근성 이름을 "시작 날짜·종료 날짜 + 날짜"로 확인 - showPicker 키보드 테스트를 달력 열기·취소 테스트로 교체 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 59 minutes. View limit details
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
minbros
left a comment
minbros
left a comment
There was a problem hiding this comment.
외부 갱신 후 이전 날짜 재적용과, 낮은 화면에서 달력 조작 영역에 접근할 수 없는 문제를 수정해 주세요.
| confirm() { | ||
| if (session?.range.start) { | ||
| const { start, end } = session.range; | ||
| onConfirm({ start, end: end || start }); |
There was a problem hiding this comment.
[P2] 변경하지 않은 달력을 닫을 때 최신 날짜를 되돌리지 않도록 해주세요
달력을 열어 둔 사이 다른 멤버의 날짜 변경이 도착하면, RoomTripEditForm은 새 날짜를 반영하지만 이 훅의 session.range는 열 때 복사한 값을 유지합니다. 이후 날짜를 고르지 않고 확인하거나 배경을 눌러 닫아도 onConfirm({ start, end: end || start })가 이전 날짜를 부모 폼에 다시 넣습니다.
예를 들어 종료일이 다른 멤버에 의해 22일에서 24일로 연장되었는데, 열린 달력을 닫으면 폼은 다시 22일이 됩니다. 닫기 자체가 서버에 저장하는 것은 아니지만, 이후 ‘적용하기’를 누르면 다른 멤버의 변경을 되돌릴 수 있습니다. 외부 날짜 갱신과 열린 임시 값을 조정하고, 사용자가 수정하지 않은 사본으로 최신 폼 값을 덮어쓰지 않도록 해주세요.
There was a problem hiding this comment.
반영했습니다 (eed90b4)
- 달력은 열 때 날짜를 복사해 두지 않고, 이번에 고른 날짜만 기억합니다. 닫을 때(확인·바깥 클릭) 고른 쪽만 폼에 반영하고, 아무것도 고르지 않았으면 바꾸지 않습니다.
- 근본 원인은 폼이 서버 값이 바뀌면 모든 칸을 다시 채우던 동작(
savedSignature)이었습니다. 그래서 여행 정보 수정 폼이 모달을 연 순간 값을 유지하도록 바꿨습니다.- 열어 둔 사이 다른 멤버가 바꿔도 입력 칸은 그대로입니다. 바꾼 게 없으면 적용하기는 꺼져 있습니다.
- 헤더에는 새 값이 보이고, 다시 열면 최신 값으로 시작합니다.
- 저장은 화면 값 그대로 보냅니다(마지막에 저장한 사람의 화면 값이 남는 것으로 정했습니다). 기간 축소 확인은 서버 최신 기간을 기준으로 계산합니다.
- 예: 다른 멤버가 종료일을 22일→24일로 늘린 뒤 A가 22일 화면 그대로 다른 칸을 고쳐 저장하면, 24→22 축소를 먼저 확인받습니다.
| return ( | ||
| <div | ||
| role="presentation" | ||
| className="fixed inset-0 z-[220] flex items-center justify-center bg-black/40 px-4" |
There was a problem hiding this comment.
[P2] 낮은 화면에서도 달력 전체를 조작할 수 있도록 해주세요
이 팝업은 달력을 화면 중앙에 고정하지만, 팝업과 내부 dialog에 높이 제한이나 스크롤 처리가 없습니다. DatePicker는 날짜 행에 h-11을 사용하므로 6주가 표시되는 달은 여백과 헤더·푸터를 합쳐 약 460px 높이가 됩니다. 모바일 가로 화면처럼 가용 높이가 320px이면 상단 월 이동과 하단 취소·확인 영역이 화면 밖으로 나갑니다.
배경 페이지를 스크롤해도 고정된 팝업의 가려진 영역에는 접근할 수 없습니다. 가용 화면 높이에 맞춰 팝업 높이를 제한하고 필요한 영역을 스크롤할 수 있게 해, 날짜 선택과 월 이동·취소·확인을 모두 사용할 수 있도록 해주세요.
There was a problem hiding this comment.
반영했습니다 (eed90b4)
- 팝업 카드 높이를 화면 높이(위아래 여백 16px 제외)로 제한하고, 넘치면 카드 안에서 세로로 스크롤합니다(
max-h-full overflow-y-auto overscroll-contain). - 가로는 최소 300px입니다. 화면이 그보다 좁으면 가운데 정렬이 양옆을 자르지 않게 왼쪽부터 놓고 가로로 스크롤합니다(
justify-center-safe). - 6주짜리 달(2027년 1월)로 확인했습니다.
- 780×360 가로 화면: 카드 높이가 328px로 줄고, 안을 스크롤하면 취소·확인까지 닿습니다.
- 360×780: 스크롤 없이 다 보입니다.
- 280×653: 폭 300px이 유지됩니다.
- --label은 .screens 바로 아래 폴더 이름만, --base는 로컬 http 주소만, --path는 앱 안 경로만 허용 - login이 고정 포트 대신 빈 포트로 띄운 전용 프로필 크롬에만 연결·저장·종료 - 외부 명령(lsof·git·open·xcrun·xcode-select)을 절대 경로로 호출 - open-pr: 기존 PR 갱신도 push 전에 커밋 목록을 보여 주고 확인 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- --base는 허용한 호스트 이름과 숫자 포트로 주소를 다시 만들어 크롬 인자로 넘김 - 결과 파일은 쓰기 직전에 .screens 안인지 확인하고, 사용법 오류는 ✖ 메시지로 출력 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 모달을 연 뒤 서버 값이 바뀌어도 입력 칸을 다시 채우지 않고, 바꾼 게 없으면 적용하기 비활성 - 저장은 화면 값 그대로, 기간 축소 확인은 서버 최신 기간 기준 - 달력은 고른 쪽만 바뀌고 아무것도 고르지 않고 닫으면 그대로 - 모바일 달력 팝업 가로 최소 300px, 화면보다 높으면 안에서 세로 스크롤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…nto feature/calendar-design
|
This branch was successfully deployed
2 participants
노션
변경 내용
TripDateField)을 디자인 시스템 Date Picker로 교체: 시작·종료 칸(Text Field Emphasis)과 기간 달력, 년·월 휠endDateMin계산 제거)변경 이유
테스트
npm run lint(에러 0, 기존 경고 4)npm test(187개 파일, 1491개 테스트 통과)npm run buildnpm run screens)🤖 Generated with Claude Code